<template>
	<div class="starss">
		<div class="stars">
			<div @click="click(1)"><i :class="[ mutableAmount > 0.5 ? 'star-fill' : 'star']"></i></div>
			<div @click="click(2)"><i :class="[ mutableAmount > 1.5 ? 'star-fill' : 'star']"></i></div>
			<div @click="click(3)"><i :class="[ mutableAmount > 2.5 ? 'star-fill' : 'star']"></i></div>
			<div @click="click(4)"><i :class="[ mutableAmount > 3.5 ? 'star-fill' : 'star']"></i></div>
			<div @click="click(5)"><i :class="[ mutableAmount > 4.5 ? 'star-fill' : 'star']"></i></div>
		</div>
	</div>
</template>

<script>
	export default {
		props: {
			amount: {
				type: Number,
				required: true
			},
			readonly: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				mutableAmount: this.amount
			}
		},
		methods: {
			click(i) {
				if(this.readonly) return false
				this.mutableAmount = (this.mutableAmount === i ? i - 1 : i)
//				this.$emit('change', this)
			},
			change(s) {
				this.mutableAmount = s
				this.$emit('change', this)
			}
		}
	}
</script>

<style lang="less" scoped>
	/*@import './stars.less';*/
	
	@import '../variables.less';
	.starss{
		display: inline-block;
		height: 100%;
	}
	.stars {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		i {
			width: 16*@base_size;
			height: 16*@base_size;
			display: block;
			background-size: 100%;
			margin-right: 5px;
		}
		.star {
			background-image: url(./star.png);
		}
		.star-fill{
			background-image: url(./star-fill.png);
		}
		.star+.star {
			margin-left: .2rem;
		}
	}
</style>